<template>
    <view class="identityPage">
		<text class="title font20">{{title}}</text>
		<view class="identityList flex">
			<block v-for="item in censusList" :key="item.type">
				<block v-if="item.meta.includes(ideName)">
					<view class="itemBox flex" @click="toHouseProperty(item)">
						<view class="item flex">
							<text class="itemTit">{{item.title}}</text>
							<text>{{item.desc}}</text>
						</view>
					</view>
				</block>
			</block>
		</view>
        <!-- <up-modal :show="showModel" :showCloseBtn="false" :closeOnClickOverlay="true" @close="showModel = false" @confirm="showModel = false">
			<view class="slot-content width100">
				<view class="restrictionBg" :class="restrictHouse"></view>
			</view>
		</up-modal>
        <up-modal :show="showModelTxt" :content="content" :showCloseBtn="false" :closeOnClickOverlay="true" @close="showModelTxt = false" @confirm="showModelTxt = false">
		</up-modal> -->

		<up-modal :show="showModel" :content="content" :closeOnClickOverlay="true" @close="showModel=false" @confirm="showModel=false">
			<view class="slot-content">
				<view class="contentWrap flex" v-if="titList.length > 0">
					<view class="txtWrap flex bg-theme text-center col-fff font20 fontBold">
						<view>
							<view v-for="(item, index) in titList" :key="index">{{ item }}</view>
						</view>
					</view>
				</view>
				<view class="restrictionBg" :class="restrictHouse" v-else></view>
			</view>
		</up-modal>

		<up-modal :show="showModelTxt" :closeOnClickOverlay="true" @close="showModelTxt=false" @confirm="showModelTxt=false">
			<view class="slot-content">
				<view class="contentWrap left-15">{{ content }}</view>
			</view>
		</up-modal>
    </view>
</template>

<script>
	export default {
        data() {
            return {
				restrictHouse: "",
				title: "",
				titList: [],
				showModel: false,
				showModelTxt: false,
				content: "",
				ideName: '',
				infos: {},
				censusList: [
					{
						title: "双沪籍",
						type: "huDouble",
						desc: "夫妻双方同为沪籍",
						meta: ["married"]
					},
					{
						title: "单沪籍",
						type: "spouseHuSingle",
						desc: "夫妻中一方为沪籍",
						meta: ["married"]
					},
					{
						title: "非沪籍",
						type: "spouseHuNo",
						desc: "夫妻双方皆为非沪籍",
						meta: ["married"]
					},
					{
						title: "非沪籍",
						type: "huNo",
						desc: "",
						meta: ["single"]
					},
					{
						title: "沪籍",
						type: "huYes",
						desc: "",
						meta: ["single"]
					},
					{
						title: "上海户籍",
						type: "collHuYes",
						desc: "90/96/87",
						meta: ["collective"]
					},
					{
						title: "非上海户籍",
						type: "collHuNo",
						desc: "99",
						meta: ["collective"]
					},
					{
						title: "满足",
						type: "doctorYes",
						desc: "",
						meta: ["doctor"]
					},
					{
						title: "不满足",
						type: "doctorNo",
						desc: "",
						meta: ["doctor"]
					},
					{
						title: "是",
						type: "troopYes",
						desc: "",
						meta: ["troop"]
					},
					{
						title: "否",
						type: "troopNo",
						desc: "",
						meta: ["troop"]
					},
					{
						title: "满足",
						type: "abroadYes",
						desc: "",
						meta: ["abroad"]
					},
					{
						title: "不满足",
						type: "abroadNo",
						desc: "",
						meta: ["abroad"]
					}
				]
            }
        },
        //分享
        onShareAppMessage(res) {
        	return {
        		title: "上海限购查询，快来测测限购几套",
        		path: `/pages/tools/purchase/identity`,
        	}
        },
        onLoad(options){
			const optType = options.type;
            this.infos.identity = optType;
			this.ideName = optType;
			switch(optType){
				case "single":
				this.title = "请选择您的户籍状态?"
				break;
				case "married":
				this.title = '请选择您和您伴侣的户籍状态?'
				break;
				case "collective":
				this.title = '请选择您的户籍证明号?'
				break;
				case "doctor":
				this.title = "已婚+学校证明(学历证明)?"
				break;
				case "troop":
				this.title = "原籍是否为上海户籍?"
				break;
				case "abroad":
				this.title = "请选择您是否满一年劳务合同?"
				break;
				default:
				break
			}
        },
		methods:{
			toHouseProperty(info){
				this.infos.census = info.type;
				switch(info.type){
					case 'huNo':
					uni.navigateTo({
						url: `/pages/tools/purchase/single-no-hu-ji`
					})
					break;
					case 'huYes':
					uni.navigateTo({
						url: `/pages/tools/purchase/house-select?info=${JSON.stringify(this.infos)}`
					})
					break;
					case 'huDouble'://已婚双户籍
					uni.navigateTo({
						url: `/pages/tools/purchase/house-property?info=${JSON.stringify(this.infos)}`
					})
					break;
					case 'spouseHuSingle':
					uni.navigateTo({
						url: `/pages/tools/purchase/house-first?info=${JSON.stringify(this.infos)}`
					})
					break;
					case 'spouseHuNo':
					uni.navigateTo({
						url: `/pages/tools/purchase/family-no-hu-ji`
					})
					break;
					case "collHuYes":
					this.content = "按沪籍政策执行";
					this.showModelTxt = true;
					break;
					case "collHuNo":
					this.content = "按外地户籍政策执行";
					this.showModelTxt = true;
					break;

					case "doctorYes":
					this.titList = ['外环外不限购','外环内限购两套'];
					this.showModel = true;
					break;

					case "doctorNo":
					this.titList = [];
					this.restrictHouse = "restrictionNone",
					this.showModel = true;
					break;

					case "troopYes":
					this.titList = ['外环外不限购','外环内限购两套'];
					this.showModel = true;
					break;

					case "troopNo":
					this.titList = ['外环外不限购','外环内限购1套'];
					this.showModel = true;
					break;
					
					case "abroadYes":
					this.titList = ['外环外不限购','外环内限购1套'];
					this.showModel = true;
					break;
					
					case "abroadNo":
					this.titList = [];
					this.restrictHouse = "restrictionNone",
					this.showModel = true;
					break;
					
					default:
					break
				}
			}
		}
    }
</script>

<style scoped lang="scss">
	.identityPage{
		::v-deep .u-modal__content{
            padding: 0 !important;
            display: block !important;
        }
		.title{
			margin-top: 20vh;
			text-align: center;
			display: block;
		}
		.identityList{
			flex-wrap: wrap;
			.itemBox{
				width: 33.3333%;
				height: 200rpx;
				margin-top: 60rpx;
				.item{
					width: 200rpx;
					height: 200rpx;
					text-align: center;
					border-radius: 50%;
					border: 1rpx solid $theme-color;
					flex-direction: column;
					font-size: 24rpx;
					line-height: 1.3;
					.itemTit{
						font-size: 32rpx;
						margin-bottom: 10rpx;
					}
				}
			}
		}
		.slot-content{
			width: 100%;
			.contentWrap{
				padding: 40rpx 0;
				.txtWrap{
					padding: 20rpx;
					width: 40vw;
					height: 40vw;
					line-height: 1.4;
					border-radius: 50%;
				}
				.pangFigure{
					width: 40vw;
					margin-left: -64rpx;
				}
			}
		}
	}

</style>
